<template>
  <div class="header_right_lang">
    <div class="header_right_btn" @click="lang.show = !lang.show">
      <img :src="lang.list[lang.current].icon" :alt="lang.list[lang.current].value" />
      <span>{{ lang.list[lang.current].name }}</span>
      <div class="icon"></div>
    </div>
    <div class="header_right_langList" v-show="lang.show">
      <div class="header_right_langItem" v-for="(item, index) in lang.list" :key="item.value" @click="langClick(index)">
        <img :src="item.icon" :alt="item.value" />
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      lang: {
        show: false,
        current: 0,
        list: [
          {
            icon: require('../assets/headerNav/english.png'),
            name: "English",
            value: "en",
          },
          {
            icon: require("../assets/headerNav/zhong.png"),
            name: "简体中文",
            value: "zh-cn",
          },

          {
            icon: require('../assets/headerNav/yuenan.png'),
            name: "Tiếng Việt",
            value: "yn",
          },
          {
            icon: require('../assets/headerNav/yindu.png'),
            name: "India",
            value: "yd",
          },
          {
            icon: require("../assets/headerNav/jpan.png"),
            name: "日本語",
            value: "dy",
          },
        ],
      },
      
      value: '',
     
      options: [
        {
          value: this.$t('邮箱登录'),
          label: this.$t('邮箱登录'),
        },
        {
          value: this.$t('账户登录'),
          label: this.$t('账户登录'),
        },
      ]
    }
  },
  methods: {
    userLogout() {
      /* removeUserInfo()
      this.$router.go(0) */
      this.$store.commit("user/USER_LOGOUT");
    },
    langClick(index) {
      localStorage.setItem("index", index);
      //localStorage.setItem("index", this.lang.list[index].icon);
      // 从本地存储获取index并赋值给this.lang.current
     /*  const storedIndex = localStorage.getItem("index");
      this.lang.current = storedIndex !== null ? storedIndex : 0; // 默认值，如果存储中没有对应的值
      this.lang.show = false;
      this.$i18n.locale = this.lang.list[index].value; // 切换语言
      localStorage.setItem("lang", this.lang.list[index].value);
      console.log(this.lang.list[index].value, this.$i18n.locale); */
      this.storedIndex = localStorage.getItem("index");
      this.lang.current = this.storedIndex !== null ? this.storedIndex : 0; // 默认值，如果存储中没有对应的值
      this.lang.show = false;
      this.$i18n.locale = this.lang.list[index].value; // 切换语言
      localStorage.setItem("lang", this.lang.list[index].value); // 本地存储语言
      console.log(this.storedIndex);

    },
    langImg(){
      this.storedIndex = localStorage.getItem("index");
      this.lang.current = this.storedIndex !== null ? this.storedIndex : 0; // 默认值，如果存储中没有对应的值
    },
  },
  created() {
    this.langImg()
  },

}
</script>

<style lang="scss" scoped>
.header_right_lang {
  position: relative;
  border-radius: 15px;

  .header_right_btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    color: #ddd;
    padding: 0 12px 0 0;
    border-radius: 40px;
    background-color: #22252f;
    height: 36px;

    img {
      width: 20px;
      height: 15px;
      margin: 0 0.5rem 0 1rem;
    }

    .icon {
      width: 10px;
      height: 6px;
      clip-path: polygon(0 0, 50% 100%, 100% 0);
      background: #ddd;
      margin: 0 0.25rem 0 0.5rem;
    }
  }

  .header_right_langList {
    position: absolute;
    will-change: transform;
    top: 0px;
    left: -31px;
    bottom: auto;
    right: 0;
    transform: translate(0, 36px);
    background-color: #2d303d;
    margin-top: 10px;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    z-index: 1060;

    .header_right_langItem {
      padding: 0.3125rem 0.9375rem 0.8125rem;
      margin-bottom: 0.5rem;
      border-bottom: 1px solid #272b37;
      font-size: 0.8125rem;
      font-weight: 400;

      img {
        margin: 0 0.5rem 0 -3px;
        width: 16px;
      }
    }

    &:after {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px;
      border-color: transparent transparent #2d303d transparent;
      right: 20px;
      top: -12px;
    }

    &:hover {
      .header_right_langItem {
        color: #fff;
        cursor: pointer;
      }
    }

    .header_right_btn:hover {
      background-color: #f6d39c;
      color: black;
    }

    .active {
      background-color: rgba($color: #04d1b3, $alpha: 0.1);

      &>img {
        width: 17px;
        height: 17px;
        margin-right: 3px;
      }

      &>span {
        font-weight: 600;
      }
    }
  }
}
</style>